<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=multiple-y-axis
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>


</head>
<body style="height: 100%; margin: 0">
<div style="float: right;">
    <div id="app">
        <el-form ref="form" :model="form">

            <el-form-item label="时间选择" prop="req_time">
                <el-date-picker
                        v-model="form.req_time"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="展示类型" prop="data_type">
                <el-select v-model="form.data_type" placeholder="请选择展示类型">
                    <el-option
                            v-for="item in data_type_options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="展示数量" prop="bar_num">
                <el-input-number v-model="form.bar_num" :min="1" :max="100" label="展示数量"></el-input-number>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" onclick="selectCount()">立即查询</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
<div id="container" style="height: 70%; width: 70%; margin-top: 5%;"></div>

<script>
    function dateFormat(date, fmt) {
        if (null == date || undefined == date) return '';
        var o = {
            "M+": date.getMonth() + 1, //月份
            "d+": date.getDate(), //日
            "h+": date.getHours(), //小时
            "m+": date.getMinutes(), //分
            "s+": date.getSeconds(), //秒
            "S": date.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    Date.prototype.toJSON = function () {
        return dateFormat(this, 'yyyy-MM-dd hh:mm:ss')
    }

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);

    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            order: 'valueDesc'
        },
        legend: {},
        xAxis: [
            {
                type: 'category',
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '请求数量',
                axisLine: {
                    show: true,
                }
            }
        ],
        series: []
    }
    myChart.setOption(option);

    function loadDATA(post_data) {
        $.ajax({
            type: "post",
            async: false, //同步执行
            url: "/api/statistics/api_count/",
            data: JSON.stringify(post_data),
            contentType: "application/json",
            dataType: "json", //返回数据形式为json
            success: function (response) {
                if (response && response.code == '200') {
                    var result = response.result;
                    var tmp = myChart.getOption(); //获取所有当前属性和数据
                    myChart.clear(); //清空所有属性和数据
                    tmp.xAxis = [{
                        type: 'category',
                        data: result.xAxis_value
                    }];
                    tmp.series = result.series_value;
                    if (post_data.data_type == 1) {
                        tmp.yAxis[0].name = '请求数量'
                    } else if (post_data.data_type == 2){
                        tmp.yAxis[0].name = '平均处理时间'
                    }else if (post_data.data_type == 3){
                        tmp.yAxis[0].name = '超时统计'
                    }
                    myChart.setOption(tmp); //删除后的数据重新绘制

                }
            }
        });
    }

    const end = new Date();
    const start = new Date();
    start.setHours(0,0,0,0);
    var post_data = {
        "begin_req_time": start,
        "end_req_time": end,
        "bar_num": 8,
        "data_type": 1,
    };
    loadDATA(post_data);

    var Main = {
        el: '#app',
        data() {
            return {
                data_type_options: [
                    {
                        value: 1,
                        label: '请求数量'
                    }, {
                        value: 2,
                        label: '平均处理时间'
                    }, {
                        value: 3,
                        label: '超时统计'
                    },
                ],
                form: {
                    req_time: [start, end],
                    data_type: 1,
                    bar_num: 8,
                }
            }
        }
    };
    const app = new Vue(Main);

    function selectCount() {
        var start = app.form.req_time[0]
        var end = app.form.req_time[1];
        var post_data = {
            "begin_req_time": start,
            "end_req_time": end,
            "bar_num": app.form.bar_num,
            "data_type": app.form.data_type
        };
        loadDATA(post_data);
    }

</script>
</body>
</html>
    